<template>
  <div 
    :class="[
      'card',
      {
        'card-hover': hover,
        'cursor-pointer': clickable,
        'border-primary': selected,
        'shadow-lg': elevated
      },
      customClass
    ]"
    @click="handleClick"
  >
    <!-- 卡片头部 -->
    <div v-if="$slots.header || title" class="mb-4">
      <slot name="header">
        <div class="flex items-center justify-between">
          <h3 v-if="title" class="text-lg font-semibold text-gray-900">
            {{ title }}
          </h3>
          <div v-if="$slots.extra" class="flex items-center space-x-2">
            <slot name="extra"></slot>
          </div>
        </div>
      </slot>
    </div>

    <!-- 卡片内容 -->
    <div class="flex-1">
      <slot></slot>
    </div>

    <!-- 卡片底部 -->
    <div v-if="$slots.footer" class="mt-4 pt-4 border-t border-gray-200">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义属性
const props = defineProps({
  // 卡片标题
  title: {
    type: String,
    default: ''
  },
  // 是否可悬停
  hover: {
    type: Boolean,
    default: false
  },
  // 是否可点击
  clickable: {
    type: Boolean,
    default: false
  },
  // 是否选中状态
  selected: {
    type: Boolean,
    default: false
  },
  // 是否提升阴影
  elevated: {
    type: Boolean,
    default: false
  },
  // 自定义类名
  customClass: {
    type: String,
    default: ''
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 处理点击事件
const handleClick = (event) => {
  if (props.clickable) {
    emit('click', event)
  }
}
</script>

<style scoped>
/* 组件特定样式可以在这里添加 */
</style>